/*
 * @Author: ayun chengyunwu@jiatui.com
 * @Date: 2023-07-13 11:26:15
 * @LastEditors: ayun chengyunwu@jiatui.com
 * @LastEditTime: 2023-07-27 14:51:57
 * @FilePath: /ift-economy-network-h5/src/pages/InvestmentScheduling/components/ProjectMonitoringItem/index.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import { Tag } from 'antd-mobile'
import Styles from './index.module.scss'
import earlyWarning from '@/assets/images/icon_early_warning.png'
import timeout from '@/assets/images/icon_timeout.png'
import Item from '../Item'


export interface data {
  projectName: string
  ganttId: string
}

type PropsT = {
  onClick?: (data: data) => void
  data: data
}

const index = ({ onClick, data }: PropsT) => {
  return (
    <Item
      onClick={() => onClick && onClick(data)}
      title={
        <>
          <div className={`d_flex d_flex_vertical_center`}>
            <span className={`fontsize_18 fw_600 color_333 ff_R mr_10`}>
              {data.projectName}
            </span>
            <Tag color="primary" fill="outline">
              未报送
            </Tag>
            <img style={{ width: '24px' }} src={earlyWarning} />
            <img style={{ width: '24px' }} src={timeout} />
          </div>
          <span className={`color_999 fontsize_12 ${Styles.address}`}>
            位于福田路和梅林路交叉口
          </span>
        </>
      }
      content={
        <ul className={`d_between_center mt_16`}>
          <li className={`d_column`}>
            <p className={`fontsize_16 color_333 fw_600 d_flex`}>
              54.2%
              <span className={`fontsize_12 ${Styles.color_cd2f2f}`}>
                +36.2个百分点
              </span>
            </p>
            <span className={`color_999 fontsize_12`}>投资进度</span>
          </li>
          <li className={`d_column`} style={{ flex: 'auto' }}>
            <span className={`fontsize_16 color_333 fw_600`}>54.2亿元</span>
            <span className={`color_999 fontsize_12`}>年度投资目标</span>
          </li>
          <li className={`d_column`} style={{ flex: 'auto' }}>
            <span className={`fontsize_16 color_333 fw_600`}>54.2亿元</span>
            <span className={`color_999 fontsize_12`}>累计完成投资</span>
          </li>
        </ul>
      }
    />
  )
}

export default index
